<template>
  <div class="main">
    <!-- 上面 -->
    <div class="nav" style="display:flex; justify-content: space-between;">
      <div class="block">
        <el-carousel height="270px">
          <el-carousel-item v-for="(img, index) in bannerlist" :key="index">
            <img :src='img.pic' alt="" width="100%" height="100%">
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- 右侧整个 -->
      <div class="right">
        <!-- 标题 -->
        <div>
          推荐活动
          <span>上海</span>
          <span>广州</span>
          <span>深圳</span>
          <span>成都</span>
          <span>武汉</span>
          <span>南京</span>
          <span>杭州</span>
          <el-button plain size="mini" class="btn">更多</el-button>
        </div>
        <!-- 海报模块 -->
        <div class="posters">
          <ul>
            <li v-for="(f,index) in fourList" :key="index">
              <div class="tag">
                {{f.title}}
              </div>
              <img :src="f.pic" alt="" height="160">
              <span>{{ f.title }}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 下面 -->
    <div class="content">
      <!-- 左边帖子 -->
      <div class="zuo">
        <div class="left">
          <div class="head">
            本周热门帖子
            <el-button plain size="mini" class="btn">更多</el-button>
          </div>
          <div class="item">
            <ul>
              <li v-for="(i,index) in tenPosting" :key="index"><span>{{ index+1 }}</span>{{i.title}}</li>
            </ul>
          </div>
        </div>
        <div class="left hide" v-if="window">
          <div class="head">
            本周热门帖子
            <el-button plain size="mini" class="btn">更多</el-button>
          </div>
          <div class="item">
            <ul>
              <li v-for="(i,index) in tenPosting" :key="index"><span>{{ index+1 }}</span>{{i.title}}</li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 中间内容 -->
      <div class="zhong">
        <div v-for="(i,index) in allPosting" :key="index">
          <div class="z-top">
            <div class="img">
              <el-avatar :size="60" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
            </div>
            <div class="z-wz">
              <span class="z-user">临安孟子</span>
              <br>
              <span class="z-rq">2023-03-20</span>
            </div>
          </div>
          <div class="z-bottom">
            <span>{{i.detail}}</span>
            <div class="z-pic">
              <img  v-for="p in i.pic" :src="p" alt="" style="width:120px;height:100%;margin-right: 10px;border-radius: 5px;">
            </div>
          </div>
        </div>
      </div>
      <!-- 右边 -->
      <div class="you">
        <div class="r-hd">
          <div class="hd-head">
            热门话题
            <el-button plain size="mini" class="btn" @click="$router
            .push('/home/topic')">更多</el-button>
          </div>
          <div class="hd-body">
            <ul>
              <li v-for="(i,index) in tenTopic" :key="index"> <span>{{ i.title }}</span><span style="color:#f4a623;">{{ i.hot }}</span></li>
            </ul>
          </div>
        </div>
        <div class="r-hd hide" v-if="window2" style="width:280px ;">
          <div class="hd-head">
            热门话题
            <el-button plain size="mini" class="btn" >更多</el-button>
          </div>
          <div class="hd-body">
            <ul>
              <li v-for="(i,index) in tenTopic" :key="index"> <span>{{ i.title }}</span><span style="color:#f4a623;">{{ i.hot }}</span></li>
            </ul>
          </div>
        </div>
        <div class="r-gg">
          <div class="gg-head">
            公告板
          </div>
          <div class="gg-body">
            <div>【招募】和展务娘一起测评手办吧！</div>
            <div>【招募】和展务娘一起测评手办吧！</div>
            <div>【招募】和展务娘一起测评手办吧！</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import httpApi from '@/http'
export default {
  data() {
    return {
      window:'',
      window2:false,
      bannerlist:[],
      fourList:[],
      tenPosting:[],
      tenTopic:[],
      allPosting:[],
      nextPosting:[],
      pageNum:1
    }
  },
  methods: {
    Scroll(){
      let scrollTop  = document.documentElement.scrollTop
      let clientHeight = document.documentElement.clientHeight
      let scrollHeight = document.documentElement.scrollHeight

      if(scrollTop>1100){
        this.window = `1111`
      }else{
        this.window = ''
      }
      if(scrollTop>1150){
        this.window2 = 1111
      }else{
        this.window2 = false
      }
      if (scrollTop + clientHeight >= scrollHeight - 50) {  // 滚动到页面底部时加载下一页数据
      this.queryAllPosting(); // 加载下一页数据的方法
    }
    },
    queryBanner(){
      httpApi.shouye.queryBanner().then(res=>{
        this.bannerlist = res.data.data
      })
    },
    queryFour(){
      httpApi.shouye.queryFour().then(res=>{
        this.fourList = res.data.data
      })
    },
    queryTenPosting(){
      httpApi.shouye.queryTenPosting().then(res=>{
        this.tenPosting = res.data.data
      })
    },
    queryTenTopic(){
      httpApi.shouye.queryTenTopic().then(res=>{
        this.tenTopic = res.data.data
      })
    },
    queryAllPosting(page){
      let params = {page:this.pageNum,pagesize:10}
      httpApi.shouye.queryAllPosting(params).then(res=>{
        this.nextPosting = res.data.data.result
        this.nextPosting = this.nextPosting.map(v=>{
           return {dates:v.dates,
                    detail: v.detail,
                    inid: v.inid,
                    is_original: v.is_original,
                    is_relate: v.is_transport,
                    is_transport: v.is_transport,
                    module: v.module,
                    pic: v.pic.split(','),
                    play_id: v.play_id,
                    tags: v.tags,
                    title: v.title,
                    user_id:v.user_id}
         })
         this.allPosting.push(...this.nextPosting)
         
         this.pageNum++
      }) 
    },
  },
  mounted(){
    window.addEventListener('scroll',this.Scroll)
    this.queryBanner()
    this.queryFour()
    this.queryTenPosting()
    this.queryTenTopic()
    this.queryAllPosting(1)
  },
  beforeDestroy(){
    window.removeEventListener('scroll',this.Scroll)
  }
}


</script>

<style lang="scss" scoped>
.hide{
  position: fixed;
  top: 0;
  width:1200px * 0.21 ;
}
body {
  background-color: #f4f5f7;
}

.main {
  width: 1200px;
  margin: 0 auto;

  .content {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;

    .zuo {
      width: 23%;

      >div {
        background-color: #fcfcfc;
        padding: 15px;

      }

      .head {
        margin-bottom: 10px;
        font-size: 22px;
      }

      .item {
        >ul {
          list-style: none;

          >li {
            width: 100%;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            font-size: 14px;
            line-height: 18px;

            >span {

              height: 18px;
              width: 18px;
              text-align: center;
              background-color: #e64e4e;
              border-radius: 10px;
              float: left;
              margin-bottom: 12px;
              margin-right: 5px;
            }
          }
        }
      }
    }

    .zhong {
      width: 50%;

      >div {
        padding: 15px;
        margin-bottom: 20px;
        background-color: #fcfcfc;
      }

      .z-top {
        display: flex;
        align-items: center;

        >.z-wz {
          margin-left: 10px;

          .z-user {
            font-size: 16px;
          }

          .z-rq {
            font-size: 14px;
            color: #999;
          }
        }
      }

      .z-bottom {
        font-size: 14px;
        color: #999;
        margin-top: 20px;
      }
    }

    .you {
      width: 23%;

      >.r-hd {
        background-color: #fcfcfc;
        width: 100%;
        padding: 15px;
        margin-bottom: 15px;

        >.hd-head {
          font-size: 20px;
          margin-bottom: 15px;

          >btn {
            float: right;
          }
        }

        >.hd-body {
          >ul {
            list-style: none;

            >li {
              display: flex;
              justify-content: space-between;
              margin-bottom: 10px;
            }
          }
        }
      }

      >.r-gg {
        background-color: #fcfcfc;
        padding: 15px;
        width: 100%;
        font-size: 20px;
        .gg-head{
          margin-bottom: 10px;
        }
        .gg-body {
          >div{
            width: 90%;
            font-size: 14px;
            background-color: #f4f5f7;
            border-radius: 7px;
            padding: 3px;
            margin: 5px;
            &:hover{
              background-color: #fec16b;
              color: white;
            }
          }
        }
      }
    }
  }

  .block {
    width: 52%;
    border: 2px solid #000;
    height: 270px;
    border-radius: 10px;
    overflow: hidden;

    img {
      display: block
    }
  }

  .right {
    width: 44%;
    border: 2px solid #000;
    height: 250px;
    border-radius: 10px;
    padding: 10px;
    position: relative;

    >div>.btn {
      position: absolute;
      right: 50px;
    }

    >div>span {
      color: #b6b7b6;
      font-size: 12px;
      margin: 11px
    }

    >.posters {
      margin-top: 15px;

      >ul {
        list-style: none;
        display: flex;
        justify-content: space-evenly;

        >li {
          width: 23%;
          margin: 0 auto;
          position: relative;

          .tag {
            box-sizing: border-box;
            position: absolute;
            padding: 2px;
            font-size: 14px;
            background-color: #f8b107;
            border-radius: 5px;
            color: white;
            white-space: nowrap;
            overflow: hidden;
          }

          img {
            border: 2px solid transparent;
          }

          &:hover>span {
            color: #f8b107;
          }

          &:hover>img {
            border: 2px solid #f8b107;
          }

          >span {
            text-align: left;
            display: -webkit-box;
            text-overflow: ellipsis;
            overflow: hidden;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
          }
        }
      }
    }
  }

}
</style>